<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    #app {
      width: 375px;
      height: 677px;
      border: 1px solid #000;
      position: relative;
    }
    /* .wrap {
      font-size: 16px;
    } */
    header {
      width: 100%;
      height: 60px;
      background-color: lightcoral;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 20px;
    }

    footer {
      position: absolute;
      width: 100%;
      height: 60px;
      bottom: 0;
      left: 0;
      border-top: 1px solid #000;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
    }
    .item {
      width: 335px;
      height: 100px;
      border: 1px solid #000;
      margin: 20px;
    }
  </style>
</head>
<body>
  <div id="app">
    <!-- 这里的html，我们可以理解为就是root根组件的template选项 -->
    <div class="wrap" :style="{ fontSize: size + 'px' }">
      <wb-header @abc="tobig"></wb-header>
      <wb-list></wb-list>
      <wb-form></wb-form>
    </div>
  </div>

  <script src="../vue3.js"></script>
  <script>
    const {createApp} = Vue;

    // 局部创建一个头部组件
    const WbHeader = {
      data() {
        return {
          n: 1
        }
      },
      template: `
        <header>
          微博头部
          <button @click="$emit('abc', n)">+</button>  
        </header>
      `
    }

    const WbListItem = {
      props: ["item"],
      template: `
        <div class="item">
          <h3>{{ item.title }}</h3>  
          <p>{{ item.content }}</p>
          <button>点赞</button>
        </div>
      `
    }

    // 内容组件
    const WbList = {
      data() {
        return {
          list: [
            {
              id: 1,
              title: "今天，从一盏马灯说起",
              content: "90年前的10月17日至20日，中央红军8.6万余人从江西于都出发"
            },
            {
              id: 2,
              title: "云南南诏：古艺活色生彩",
              content: "小镇烟火气，最抚凡人心。乡镇是连接城乡的枢纽，也是承载中国文明传承与现代化发展协调统一的关键一环。"
            },
            {
              id: 3,
              title: "释放文旅联动乘数效应",
              content: "10月22日至24日，金砖国家领导人第十六次会晤将在俄罗斯喀山举行，这也是金砖国家大扩员后的首次峰会"
            },
            {
              id: 4,
              title: "云南南诏：古艺活色生彩",
              content: "小镇烟火气，最抚凡人心。乡镇是连接城乡的枢纽，也是承载中国文明传承与现代化发展协调统一的关键一环。"
            },
          ]
        }
      },
      components: {
        WbListItem
      },
      template: `
        <div>
          <wb-list-item v-for="item in list" :key="item.id" :item="item"></wb-list-item> 
        </div>
      `
    }

    // 表单组件
    const WbForm = {
      template: `
        <footer>
          <input type="text" />
          <button>提交</button>
        </footer>
      `
    }

    const app = createApp({
      components: {
        WbHeader,
        WbList,
        WbForm
      },
      data() {
        return {
          size: 16
        }
      },
      methods: {
        tobig(n) {
          this.size += n;
        }
      }
    });

    app.mount("#app");
  </script>
</body>
</html>